<template>
	<el-button type="primary" @click="add()">
		添加
	</el-button>
	<el-table :data="userData">
		<el-table-column prop="name" label="用户名称">
			
		</el-table-column>
		<!-- <el-table-column prop="roleName" label="角色">
			
		</el-table-column> -->
		<el-table-column label="操作">
			<template #default="scope">
				
				<el-button type="warning" @click="update(scope.row)">
					修改
				</el-button>
				<el-button color="red" @click="del(scope.row.id)">
					删除
				</el-button>
			</template>
		</el-table-column>
	</el-table>
	<el-dialog
	    v-model="dialogVisible"
	    title="添加用户"
	    width="30%"
	  >
	  <el-input placeholder="请输入用户名" v-model="name"></el-input>
	  <el-input placeholder="请输入密码" v-model="password"></el-input>
	  
		<!-- <el-select
		      v-model="roleValue"
		      placeholder="选择角色："
		      size="large"
		      style="width: 240px"
		    >
		      <el-option
		        v-for="item in rolesData"
		        :key="item.id"
		        :label="item.name"
		        :value="item.id"
		      />
		    </el-select> -->
	    <template #footer>
	      <span class="dialog-footer">
	        <el-button @click="dialogVisible = false">Cancel</el-button>
	        <el-button type="primary" @click="addSubmit"
	          >Confirm</el-button
	        >
	      </span>
	    </template>
	  </el-dialog>
	  <el-dialog
	      v-model="dialogVisible_update"
	      title="修改用户"
	      width="30%"
	    >
	    <el-input placeholder="请输入用户名" v-model="name"></el-input>
	    <el-input placeholder="请输入密码" v-model="password"></el-input>
	      <template #footer>
	        <span class="dialog-footer">
	          <el-button @click="dialogVisible_update = false">Cancel</el-button>
	          <el-button type="primary" @click="updateSubmit"
	            >Confirm</el-button
	          >
	        </span>
	      </template>
	    </el-dialog>
	  <el-dialog
	      v-model="dialogVisible_del"
	      title="删除分类"
	      width="30%"
	    >
	    你确定要删除id为{{id}}这个分类吗？
	      <template #footer>
	        <span class="dialog-footer">
	          <el-button @click="dialogVisible_del = false">Cancel</el-button>
	          <el-button type="primary" @click="delSubmit"
	            >Confirm</el-button
	          >
	        </span>
	      </template>
	    </el-dialog>
</template>

<script setup>
	import {ref} from 'vue'
	import http from './request.js'
	const userData = ref([])
	const dialogVisible = ref(false)
	const dialogVisible_del = ref(false)
	const id = ref('')
	const name = ref('')
	const password = ref('')
	// const roleValue = ref(undefined)
	function query(){
		http.get('/user/select').then(res=>{
			userData.value = res.data
		})
	}
	query()
	const rolesData = ref([])
	// function queryRoles(){
	// 	http.get('/roles/queryAll').then(res=>{
	// 		rolesData.value = res.data
	// 	})
	// }
	function add(){
		dialogVisible.value = true
		name.value = ''
		password.value = ''
		// queryRoles()
	}
	function addSubmit(){
		http.post('/user/save',{name:name.value,password:password.value}).then(res=>{
			dialogVisible.value = false
			query()
		})
	}
	function del(e){
		dialogVisible_del.value = true
		id.value = e
	}
	function delSubmit(){
		http.get('/user/del?id='+id.value).then(res=>{
			query()
			dialogVisible_del.value = false
		})
	}
	const dialogVisible_update = ref(false)
	function update(e){
		dialogVisible_update.value = true
		name.value = e.name
		password.value = e.password
		id.value = e.id
	}
	function updateSubmit(){
		http.post('/user/update',{name:name.value,password:password.value,id:id.value}).then(res=>{
			dialogVisible_update.value = false
			query()
		})
	}
</script>

<style>
</style>